<template>
	<view class="container">
		<view class="port-three-list">
			<view class="port-three-list-one-port">
				<view class="port-three-list-one-port">
					<image class="list-one-port-img" src="https://shop.sdxinruan.com/taiqiu/static/fangjian.jpeg"
						mode=""></image>
					<!-- <p class="daiqingjie">待清洁</p> -->
				</view>
				<view class="list-one-port-ri">
					<view class="list-one-port-ri-baoming">
						<p class="list-one-port-ri-baoming-p">VIP 富豪厅</p>
						<!-- <p class="list-one-port-ri-baoming-p1">（商务包）</p> -->
					</view>
					<view class="list-one-port-ri-tiaojian">
						<p class="list-one-port-ri-tiaojian-li">空调</p>
						<p class="list-one-port-ri-tiaojian-li">有窗</p>
						<p class="list-one-port-ri-tiaojian-li">4-10人</p>
						<p class="list-one-port-ri-tiaojian-li">商务</p>
						<p class="list-one-port-ri-tiaojian-li">WIFI</p>
						<p class="list-one-port-ri-tiaojian-li">玉石麻将</p>
						<p class="list-one-port-ri-tiaojian-li">茶台</p>
						<p class="list-one-port-ri-tiaojian-li">茶吧机</p>
						<p class="list-one-port-ri-tiaojian-li">沙发</p>
					</view>
					<view class="tip">
						<view class="type">
							<p>包间类型：商务包</p>
						</view>
						<view class="type">
							<p>注意事项：最低为2小时起订</p>
						</view>
					</view>
					<view class="jiage">
						<view class="jiage-le">
							<p class="jiage-le-red">￥35.00</p>
							<p class="jiage-le-p1">元/小时</p>
						</view>
						<view class="jiage-ri">
							<p class="jiage-ri-p1">续单</p>
							<p class="jiage-ri-p2">￥35元</p>
							<p class="jiage-ri-p1">/小时</p>
						</view>
					</view>
					<!-- 	<view class="taocan">
						<view class="taocan-li">
							<p class="taocan-li-1">3小时套餐：￥90.0元</p>
							<p class="taocan-li-1 taocan-li-2">5小时套餐：￥150.0元</p>
						</view>
						<navigator url="/pages/room/room">
							<p class="yuding">预定</p>
						</navigator>
						<p class="yuding" @click='predetermine'>预定</p>
					</view> -->
				</view>
			</view>
			<!-- <div class="shiduan">
				<div class="shiduan-1" v-for="(num, index) in sortedTimeArray" :key="index">
					<p class="shiduan-1-p1" :class="{ 'shiduan-1-p1-gray': index > currentTimeIndex }"></p>
					<p class="shiduan-1-p2">{{ num }}</p>
				</div>
			</div>
			<view class="shiduan-2">
				<view class="shiduan-2-view">
					<p class="shiduan-1-p1"></p>
					<p class="shiduan-2-view-p">已预订时段</p>
				</view>
				<view class="shiduan-2-view shiduan-2-view1">
					<p class="shiduan-1-p1 shiduan-1-p1-gray"></p>
					<p class="shiduan-2-view-p">可预订时段</p>
				</view>
			</view> -->
		</view>
		<!-- mode -->
		<view class="mode">
			<u-tabs class="tab-mode" :current="tabsCurrent" :list="list" lineWidth="20" lineHeight="4"
				lineColor="#f56c6c" :activeStyle="{
			        color: '#fd6024',
			        fontWeight: 700,
			    }" :inactiveStyle="{
			        color: '#606266',
			    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;" @click="tabsClick">
			</u-tabs>
		</view>
		<view class="modedateselect-mt">
			<modeDateSelect :selectDate1="selectDate" @change-time="timeEmit"></modeDateSelect>
		</view>
		<view>
			<view class="motaocan">
				<view class="motaocan-text">套餐选择</view>
				<view class="motaocan-list" v-if="tabsCurrent === 0">
					<view class="motaocan-list-item" :class="{ 'selected': index === selectedIndex }"
						v-for="item,index in taocanList" :key="index" @click="handletaoCan(index,item.hour)">
						<text class="motaocan-list-label">{{ item.label}}</text>
						<text class="motaocan-list-price">￥{{ item.price}}</text>
					</view>
				</view>
				<view class="motaocan-list" v-if="tabsCurrent === 1">
					<view class="motaocan-list-item hour-item" :class="{ 'selected': index === selectedIndex }"
						v-for="item,index in hourList" :key="index" @click="handletaoCan(index,item.hour)">
						<text class="motaocan-list-label">{{ item.label}}</text>
						<!-- <text class="motaocan-list-price">￥{{ item.price}}</text> -->
					</view>
				</view>
			</view>
			<view class="date-select">
				<view class="date-select-text">时间选择</view>
				<view class="date-select-btn">
					<view class="btn-date" @click="show = true">
						<text>{{selectTime}}</text>
						<u-icon name="arrow-down-fill" color="#bfc2c3" size="14"></u-icon>
						<u-icon name="edit-pen-fill" color="#66686e" size="14"></u-icon>
					</view>
					<view style="text-align: center;color: #000;font-size: 24upx;">
						<p>消费时长</p>
						<p>{{spaceTime}}小时</p>
					</view>
					<view class="btn-date bg">
						<text>{{endSpaceTime}}</text>
				<!-- 		<u-icon name="arrow-down-fill" color="#bfc2c3" size="14"></u-icon>
						<u-icon name="edit-pen-fill" color="#66686e" size="14"></u-icon> -->
					</view>
				</view>
				<!-- 时段 -->
				<div class="shiduan">
					<div class="shiduan-1" v-for="(num, index) in sortedTimeArray" :key="index">
						<p v-if="selectTime !='00.00'" class="shiduan-1-p1" :class="{ 'shiduan-1-p1-gray': index > currentTimeIndex }"></p>
						<p v-else class="shiduan-1-p1 shiduan-1-p1-gray"></p>
						<p class="shiduan-1-p2">{{ num }}</p>
					</div>
				</div>
				<view class="shiduan-2">
					<view class="shiduan-2-view">
						<p class="shiduan-1-p1"></p>
						<p class="shiduan-2-view-p">已预订时段</p>
					</view>
					<view class="shiduan-2-view shiduan-2-view1">
						<p class="shiduan-1-p1 shiduan-1-p1-gray"></p>
						<p class="shiduan-2-view-p">可预订时段</p>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="moTaoCan" v-if="tabsCurrent === 1">
		</view> -->
		<!-- 使用说明 -->
		<view class="use">
			<span>使用说明</span>
		</view>
		<!-- 预定 -->
		<view class="destined">
			<div class="con">
				<view class="left">
					<p v-if="tabsCurrent != 1">
						<span>￥{{ taocanList[selectedIndex].price }}元</span>/共{{ taocanList[selectedIndex].label }}</p>
					<p v-if="tabsCurrent === 1">
						<span>￥{{ hourList[selectedIndex].price }}元</span>/共{{ hourList[selectedIndex].label }}
					</p>
				</view>
				<view class="right">预定</view>
			</div>
		</view>
		<!-- 时间选择器 -->
		<view>
			<!-- <u-picker :show="show" ref="uPicker" :columns="moreList" @confirm="confirm" @change="changeHandler"></u-picker> -->
			<!-- <picker @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">{{moreList[index]}}</view>
			</picker> -->
			<u-datetime-picker
					:show="show"
					v-model="value1"
					:minDate="minDate"
					:maxDate="maxDate"
					@confirm="handelConfirm"
					@cancel="handelClose"
					mode="datetime"
			></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	//  引入日期时间格式代码
	import modeDateSelect from '@/components/modeDateSelect/modeDateSelect.vue'
	export default {
		data() {
			return {
				show: false,
				selectTime: '22:15',
				// tabs 切换数组
				list: [{
					name: '套餐模式'
				}, {
					name: '小时模式'
				}],
				tabsCurrent: 0,
				value1: '',
				spaceTime: 3,
				endSpaceTime: '',
				// 套餐
				taocanList: [{
						index: 1,
						label: '3小时套餐',
						price: '90.0',
						hour: 3
					},
					{
						index: 2,
						label: '5小时套餐',
						price: '150.0',
						hour: 5
					},
					{
						index: 3,
						label: '6小时套餐',
						price: '180.0',
						hour: 6
					},
					{
						index: 4,
						label: '8小时套餐',
						price: '240.0',
						hour: 8
					},
				],
				// 小时模式
				hourList: [{
						index: 1,
						label: '2小时',
						hour: 2,
						price: '70.00'
					},
					{
						index: 2,
						label: '3小时',
						hour: 3,
						price: '105.00'
					},
					{
						index: 3,
						label: '4小时',
						hour: 4,
						price: '140.00'
					},
					{
						index: 4,
						label: '5小时',
						hour: 5,
						price: '175.00'
					},
					{
						index: 5,
						label: '6小时',
						hour: 6,
						price: '210.00'
					},
				],
				selectedIndex: 0,
				timeArray: [ // 存放时间段的起始时间
					1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
					13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
					23, 24
				],
				sortedTimeArray: [], // 排序后的时间数组
				currentTimeIndex: 0, // 当前时间在数组中的索引
				moreList: {},
				dateList: [[],[],[1]],
				minDate: '',
				maxDate: '',
				sevenDay: '',
				selectDate: '',
				currentSelectTime: '',
				NotFirst:false
			}
		},
		created() {
			this.selectTime = `${this.padZero(new Date().getHours())}:${this.padZero(new Date().getMinutes())}`
			this.endSpaceTime = `${this.padZero(new Date(new Date().getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(new Date().getMinutes())}`
			this.selectDate = `${this.padZero(new Date().getFullYear())}:${this.padZero(new Date().getDate())}`
			this.sortTimeArray(); // 初始排序
			setInterval(() => {
				this.sortTimeArray(); // 定时排序
			}, 1000 * 60); // 每分钟更新一次
			// 时间选择器
			const startDate = new Date();
			const endDate = new Date();
			endDate.setDate(endDate.getDate() + 6);
			this.generateDateList(startDate, endDate);
			this.currentSelectTime = new Date()
			// this.moreList[1] = [22,23]
			// for(let i=15;i<=55;i++) {
			// 	this.moreList[2].push(i)
			// }
		},
		methods: {
			// 接受子组件传递的时间值
			timeEmit(n){
				this.NotFirst = n;
				if(n){
					this.selectTime = "00.00";
					let zeroTime = new Date(new Date().toLocaleDateString())
					this.endSpaceTime = `${this.padZero(new Date(zeroTime.getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(zeroTime.getMinutes())}`
					this.sortedTimeArray = [ // 存放时间段的起始时间
						0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
						13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
						23
					] //归零
					console.log(this.sortedTimeArray)
				}else{
					this.selectTime = `${this.padZero(new Date().getHours())}:${this.padZero(new Date().getMinutes())}`
					this.endSpaceTime = `${this.padZero(new Date(new Date().getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(new Date().getMinutes())}`
					this.sortTimeArray()
				}
			},
			// 获取时间列表
			getTimeList(e) {
				console.log(111)
				console.log(e)
				const year = new Date().getFullYear()
				e.map(item => {
					const vitem = `${year}/${item.split('-')[0]}/${item.split('-')[0]}`
					this.moreList[0].push(vitem)
				})
				console.log(222)
				console.log(this.moreList)
			},
			generateDateList(startDate, endDate) {
				const dateList = [];
				const currentDate1 = new Date(startDate)
				currentDate1.setDate(startDate.getDate() + 7);
				// const month = this.
				const day1 = `${currentDate1.getFullYear()}-${currentDate1.getMonth()+1}-${currentDate1.getDate()}`
				this.sevenDay = day1
				for (let i = 0; i < 7; i++) {
					const currentDate = new Date(startDate);
					currentDate.setDate(startDate.getDate() + i);
			
					const day = this.formatDate(currentDate);
					let info = this.getDateInfo(currentDate);
			
					dateList.push({
						day,
						info
					});
				}
			
				this.dateList = dateList;
				console.log(this.dateList)
				const year = new Date().getFullYear()
				this.moreList[0] = []
				this.dateList.map(item => {
					const vitem = `${year}-${item.day.split('-')[0]}-${item.day.split('-')[1]}`
					this.moreList[0].push(vitem)
				})
				console.log(222)
				console.log(this.moreList)
				this.minDate = new Date().getTime()
				this.maxDate = new Date(`${this.sevenDay} 22:15:00`).getTime()
				console.log(`${this.moreList[0][0]} 22:15:00`,`${this.sevenDay} 23:55:59`)
			},
			
			formatDate(date) {
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${this.padZero(month)}-${this.padZero(day)}`;
			},
			padZero(value) {
				return value < 10 ? `0${value}` : value;
			},
			getDateInfo(date) {
				const today = new Date();
				const isToday = date.toDateString() === today.toDateString();
			
				if (isToday) {
					return '今天';
				} else {
					const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
					const dayOfWeek = weekDays[date.getDay()];
					return `周${dayOfWeek}`;
				}
			},
			tabsClick(item) {
				console.log('item', item);
				this.tabsCurrent = item?.index
				if(item.index == 0) {
					this.spaceTime = 3
				} else {
					this.spaceTime = 2
				}
				if(this.selectTime == "00.00"){
					let zeroTime = new Date(new Date().toLocaleDateString())
					this.endSpaceTime = `${this.padZero(new Date(zeroTime.getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(zeroTime.getMinutes())}`
				}else{
					this.endSpaceTime = `${this.padZero(new Date(this.currentSelectTime.getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(this.currentSelectTime.getMinutes())}`
				}
				// this.endSpaceTime = `${this.padZero(new Date(this.currentSelectTime.getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(this.currentSelectTime.getMinutes())}`
			},
			handletaoCan(taoCanIndex,space) {
				this.selectedIndex = taoCanIndex;
				this.spaceTime = space
				if(this.selectTime == "00.00"){
					let zeroTime = new Date(new Date().toLocaleDateString())
					this.endSpaceTime = `${this.padZero(new Date(zeroTime.getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(zeroTime.getMinutes())}`
				}else{
					this.endSpaceTime = `${this.padZero(new Date(this.currentSelectTime.getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(this.currentSelectTime.getMinutes())}`
				}
				// this.endSpaceTime = `${this.padZero(new Date(this.currentSelectTime.getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(this.currentSelectTime.getMinutes())}`
			},
			sortTimeArray() {
				console.log(this.selectTime.split(":")[0],new Date().getHours())
				const currentHour = parseInt(this.selectTime.split(":")[0]); // 获取当前小时数
				console.log(currentHour)
				this.currentTimeIndex = this.timeArray.indexOf(currentHour); // 获取当前时间在数组中的索引
				console.log(this.currentTimeIndex)
				if (this.currentTimeIndex === -1) {
					return; // 当前时间不在数组中，不需要排序
				}
				const newTimeArray = this.timeArray.slice(this.currentTimeIndex).concat(this.timeArray.slice(0, this
					.currentTimeIndex)); // 将早于当前时间的时间段移到数组末尾
				this.sortedTimeArray = newTimeArray; // 保存排序后的数组
			},
			handelConfirm(date) {
				console.log(date)
				date = new Date(date.value)
				this.currentSelectTime = date
				this.selectTime = `${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`
				this.endSpaceTime = `${this.padZero(new Date(date.getTime() + this.spaceTime*60*60*1000).getHours())}:${this.padZero(date.getMinutes())}`
				this.selectDate = `${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())}`
				this.$emit('changeDate', this.selectDate)
				console.log(this.selectTime)
				this.show = false
			},
			handelClose() {
				this.show = false
			}
		},
		components: {
			modeDateSelect
		}
	}
</script>

<style>
	@import url(./room.css);

	/* 模式 */
	.mode {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30upx;
		background-color: #fff;
	}

	/* 日期选择组件引入 */
	.modedateselect-mt {
		/* margin-bottom: 20upx; */
		padding-bottom: 20upx;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	/* 穿透tabs 文字 */
	.mode /deep/ .u-tabs__wrapper__nav__item__text {
		font-size: 30upx;
	}

	/* 套餐模式 */
	.motaocan {
		padding: 10upx;
		background-color: #fff;
	}
.motaocan-text {
			font-size: 35upx;
			color: #131214;
			font-weight: 700;
			margin-bottom: 20upx;
		}
	.motaocan-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.motaocan-list .hour-item{
		height: 60upx;
		border-radius: 10upx;
	}
	.motaocan-list-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 136upx;
		height: 120upx;
		margin-right: 20upx;
		font-size: 24upx;
		color: #666;
		background-color: #e6e6e6;
	}

	.selected {
		color: #FF5B27;
		border: 1upx solid #FF5B27;
		/* 选中时的边框颜色 */
		background-color: #fffffd;
		/* 选中时的背景颜色 */
	}
	/* 时间选择 */
	.date-select {
		background-color: #fff;
		padding-top: 10upx;

	}
	.date-select-text {
		font-size: 35upx;
		color: #131214;
		font-weight: 700;
		margin-bottom: 20upx;
		margin-left: 10upx;
	}
	.date-select-btn{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;
		font-size: 26upx;
	}
	.btn-date{
		padding: 20upx;
		border: 1px solid #FF5B27;
		border-radius: 30upx;
		width: 180upx;
		height:30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	.btn-date .bg{
		background-color: #eeecea;
	}
	.btn-date.bg{
		background-color: #eeecea;
		border-color: #D4D3D2;
	}
	.bg text{
		width: 180upx;
		text-align: center;
	}
	.use{
		height: 200upx;
		margin: 30upx 0 30upx;
		padding-top: 20upx;
		padding-left: 10upx;
		background-color: #fff;
	}
	.use span{
		display: block;
		padding-left: 10upx;
		font-size: 34upx;
		line-height: 34upx;
		font-weight: 550;
		border-left: 3px solid #FB5A26;
	}
	.destined{
		position: fixed;
		bottom: 20upx;
		left: 0;
		height: 90upx;
		width: 100%;
		color: #fff;
		line-height: 90upx;
	}
	.destined .con{
		width: 90%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		border-radius: 90upx;
		overflow: hidden;
	}
	.destined .left{
		width: 70%;
		background-color: #474747;
	}
	.destined .left span{
		color: #DC3D3D;
		padding-left: 20upx;
	}
	.destined .right{
		width: 30%;
		text-align: center;
		background: linear-gradient(to right, rgb(255, 158, 2), rgb(254, 95, 37));
	}
</style>